<template>
  <div>
    <a-form
      :model="drugsData"
      name="basic"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 12 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="药品名称"
        name="drugsName"
        :rules="[{ required: true, message: '请输入药品名称！' }]"
      >
        <a-input
          v-model:value="drugsData.drugsName"
          placeholder="请输入药品名称"
        />
      </a-form-item>

      <a-form-item
        label="药品制造商"
        name="manufacturer"
        :rules="[{ required: true, message: '请输入药品制造商！' }]"
      >
        <a-input
          placeholder="请输入药品制造商"
          v-model:value="drugsData.manufacturer"
        />
      </a-form-item>

      <a-form-item
        label="药品剂型"
        name="dosageForm"
        :rules="[{ required: true, message: '请输入药品剂型！' }]"
      >
        <a-input
          placeholder="请输入药品剂型"
          v-model:value="drugsData.dosageForm"
        />
      </a-form-item>

      <a-form-item
        label="药品容量"
        name="strength"
        :rules="[{ required: true, message: '请输入药品容量！' }]"
      >
        <a-input
          placeholder="请输入药品容量"
          v-model:value="drugsData.strength"
        />
      </a-form-item>

      <a-form-item
        label="包装规格"
        name="packageSize"
        :rules="[{ required: true, message: '请输入包装规格！' }]"
      >
        <a-input
          placeholder="请输入包装规格"
          v-model:value="drugsData.packageSize"
        />
      </a-form-item>

      <a-form-item
        label="药品价格"
        name="price"
        :rules="[{ required: true, message: '请输入药品价格！' }]"
      >
        <a-input-number
          v-model:value="drugsData.price"
          addon-before="+"
          addon-after="￥"
          :min="0.0"
          :max="1000000"
        ></a-input-number>
      </a-form-item>

      <a-form-item
        label="过期时间"
        name="expirationDate"
        :rules="[{ required: true, message: '请输入过期时间！' }]"
      >
        <a-date-picker
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          :disabledDate="disabledDate"
          style="width: 100%"
          v-model:value="drugsData.expirationDate"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button
          style="margin-right: 20px; background-color: #b83b5e"
          type="primary"
          html-type="submit"
          >提交</a-button
        >
        <a-button @click="reset">重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import dayjs, { Dayjs } from 'dayjs'
import { message } from 'ant-design-vue'
import { ref, reactive, onMounted } from 'vue'
import { DataModel } from '@/api/Drugs/model'
import { apiAddDrugs, apiDrugsDetails, apiUpdateDrugs } from '@/api/Drugs/api'
const props = defineProps(['drugsId'])
const emit = defineEmits(['receiveData'])
const drugsData = ref<DataModel>({
  drugsId: 0,
  drugsName: '',
  manufacturer: '',
  dosageForm: '',
  strength: '',
  packageSize: '',
  price: 0,
  expirationDate: '',
})

const disabledDate = (current: Dayjs) => {
  return current && current < dayjs().endOf('day')
}

const onFinish = async () => {
  if (drugsData.value.drugsId == 0) {
    try {
      await apiAddDrugs(drugsData.value)
      Object.keys(drugsData.value).forEach((key) => delete drugsData.value[key])
      emit('receiveData', 3)
    } catch (error) {
      emit('receiveData', 4)
    }
  } else {
    try {
      await apiUpdateDrugs(drugsData.value)
      Object.keys(drugsData.value).forEach((key) => delete drugsData.value[key])
      emit('receiveData', 1)
    } catch (error) {
      emit('receiveData', 2)
    }
  }
}
//重置表单数据
const reset = async () => {
  Object.keys(drugsData.value).forEach((key) => delete drugsData.value[key])
  drugsData.value.drugsId = 0
}

const onFinishFailed = () => {
  message.error('请完善表单内容')
}
onMounted(async () => {
  if (props.drugsId != 0) {
    let res = await apiDrugsDetails(props.drugsId)
    drugsData.value = res.data
  }
})
</script>

<style lang="less" scoped></style>
